<template>
  <!-- Layui引入的布局，纯属为了敲前段的时候自己看着舒服，合并的时候拉可替换内容显示模块就好 -->
  <div class="layui-row layui-col-space5">
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">1/3</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo">
        <!--可替换显示的内容的模块 -->
          <div class="four-function">
            <el-tabs v-model="activeName" type="card" stretch @tab-click="handleClick">
              <el-tab-pane label="新闻时事" name="first" > <home-news></home-news></el-tab-pane>
              <el-tab-pane label="公司动态" name="second"><CompanyDynamics></CompanyDynamics></el-tab-pane>
              <el-tab-pane label="大神风采" name="third" ><GreateStyle></GreateStyle></el-tab-pane>
              <el-tab-pane label="关于我们" name="fourth"><AboutUs></AboutUs></el-tab-pane>
            </el-tabs>
          </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">1/3</div>
    </div>
  </div>
</template>

<script>
// 关于我们
import AboutUs from './AboutUs.vue'
// 公司动态
import CompanyDynamics from './CompanyDynamics.vue'
// 新闻时事
import HomeNews from "./HomeNews.vue";
// 大神风采
import GreateStyle from './GreateStyle.vue'
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  components: {
    HomeNews,
    CompanyDynamics,
    AboutUs,
    GreateStyle
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
/* .center-main {
  border: 0;
  height: 700px;
  width: 600px;
} */

/* 四个小功能div的样式 */
.four-function {
  width: 598px;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  background-color: #fff;
  color: rgb(216, 213, 213);
  margin-bottom: 5px;
}

.Temporary-picture {
  float: left;
  padding-bottom: 10px;
  margin-right: 10px;
}

/* 左边图片样式 */
.article-img {
  float: left;
  padding-bottom: 10px;
}
/* 右边内容样式 */
.article-mid {
  float: left;
  margin-left: 5px;
  height: 150px;
  width: 400px;
}

p.intro {
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  height: 48px;
  margin-bottom: 8px;
  color: #666;
}



</style>